<template>
  <div class="header-container" :class="{ visable: isHideHead }">
    <div class="header">
      <!-- logo -->
      <a href="/">
        <img
          class="logo"
          :src="
            'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg' ||
            'https://image.xumaobin.xyz/2022/08/25/75c62b78073c8.png'
          " />
        <img
          class="logo-small"
          :src="
            'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg' ||
            'https://image.xumaobin.xyz/2022/08/25/5eef2ad64d6b6.png'
          "
      /></a>
      <!-- 左导航 -->
      <div class="nav-list">
        <ul class="nav-left">
          <li
            class="nav-item"
            v-for="(item, i) in navList"
            :key="i"
            :class="{
              hover: showList === i,
              headerChecked: headerChecked === item
            }"
            @mousemove="showList = i"
            @mouseleave="showList = false"
            @click="headerChecked = item"
          >
            {{ item }}
          </li>
          <li
            class="nav-item"
            :class="{ headerChecked: headerChecked === '商城' }"
            @click="headerChecked = '商城'"
          >
            商城
          </li>
          <li
            class="nav-item"
            :class="{ headerChecked: headerChecked === 'APP' }"
            @click="headerChecked = 'APP'"
          >
            APP
          </li>
          <li
            class="nav-item"
            :class="{ headerChecked: headerChecked === '插件' }"
            @click="headerChecked = '插件'"
          >
            插件
          </li>
          <li>
            <img
              class="buy-img"
              :src="
                'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7482b3ad2cd14edda31f05399c2ae759~tplv-k3u1fbpfcp-zoom-1.image?' ||
                'https://image.xumaobin.xyz/2022/08/25/2c07f4a2f47c1.png'
              "
            />
          </li>
        </ul>
        <!-- 小屏幕显示的首页 -->
        <li
          class="nav-item nav-left-small"
          @click="isShownNavLeftSmall = !isShownNavLeftSmall"
        >
          <span class="headerChecked">{{ headerChecked }}</span>
          <i class="el-icon-caret-bottom"></i>
          <div class="nav-left-card" v-show="isShownNavLeftSmall">
            <div
              @click="headerChecked = '首页'"
              :class="{ headerChecked: headerChecked === '首页' }"
            >
              首页
            </div>
            <div
              @click="headerChecked = '沸点'"
              :class="{ headerChecked: headerChecked === '沸点' }"
            >
              沸点
            </div>
            <div
              @click="headerChecked = '直播'"
              :class="{ headerChecked: headerChecked === '直播' }"
            >
              直播
            </div>
            <div
              @click="headerChecked = '活动'"
              :class="{ headerChecked: headerChecked === '活动' }"
            >
              活动
            </div>
            <div
              @click="headerChecked = '商城'"
              :class="{ headerChecked: headerChecked === '商城' }"
            >
              商城
            </div>
            <img
              class="buy-img"
              src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7482b3ad2cd14edda31f05399c2ae759~tplv-k3u1fbpfcp-zoom-1.image?"
            />
          </div>
        </li>
        <!-- 右导航 -->
        <ul class="nav-right">
          <div class="nav-right-search-group">
            <li class="nav-item">
              <!-- 输入框 -->
              <div class="form" :class="{ focus: isFocus === true }">
                <input
                  type="text"
                  v-model="query"
                  class="input"
                  @focus="isFocus = true"
                  @blur="isFocus = false"
                  @keyup.enter="goToSearch"
                  placeholder="探索稀土掘金"
                />
                <div class="search" @click="goToSearch">
                  <img
                    src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/1e8ab9a22f0ddc36349f60b38900d0bd.svg"
                    alt=""
                  />
                </div>
              </div>
            </li>
            <!-- 创作者中心 -->
            <li class="nav-item creater-container">
              <div class="creater" :class="{ hidden: isFocus === true }">
                <button class="add-btn">创作者中心</button>
                <div class="show-more">
                  <i class="el-icon-caret-bottom"></i>
                </div>
              </div>
            </li>
          </div>
          <!-- 会员 -->
          <li class="nav-item">
            <div class="header-partner">
              <img
                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/24127194d5b158d7eaf8f09a256c5d01.svg"
                class="partner-img"
              />
              会员
            </div>
          </li>
          <!-- :class="{ hidden: isFocus }" -->
          <li class="nav-item">
            <button class="btn-login" :class="{ 'hidden-small': isFocus }">
              登录
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 输入框数据
      query: '',
      // 输入框是否获取焦点
      isFocus: false,
      // 要显示的导航栏的index
      showList: null,
      // 导航栏配置
      navList: ['首页', '沸点', '直播', '活动'],
      // 小屏幕时，显示列表导航栏
      isShownNavLeftSmall: false,
      // 选中的导航栏
      headerChecked: '首页'
    }
  },
  computed: {
    ...mapState(['isHideHead'])
  },
  created() {},
  methods: {
    // 前往收缩页
    goToSearch() {
      if (!this.query) return this.$message.warning('请输入搜索内容')
      this.query = this.query.trim()
      // 如果没有查询参数，跳转到搜索页
      if (!this.$route.query.query)
        this.$router.push(`/search?query=${this.query}`)
      // 如果有查询参数，即在搜索页，用新数据刷新页面
      else {
        this.$router.push(`/search?query=${this.query}`)
        window.location.reload()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 5rem;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  z-index: 100;
  transition: 0.2s all;

  transform: translateZ(0);
  .header {
    max-width: 1440px;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .logo {
      margin-right: 1rem;
      margin-left: 24px;
      width: 107px;
      cursor: pointer;
      height: 22px;
    }
    .logo-small {
      display: none;
      margin: 0 1rem;
      width: 31px;
      cursor: pointer;
      height: 2rem;
    }

    .nav-list {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .nav-left {
        display: flex;
        align-items: center;

        .nav-item:hover {
          color: var(--taojin-font-1);
        }
      }

      .nav-left-small {
        display: none;
        position: relative;

        .nav-left-card {
          position: absolute;
          top: 60px;
          padding: 0.667rem;
          width: 11.9rem;
          right: -4rem;
          text-align: center;
          background-color: #fff;
          box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
          border: 1px solid #ebebeb;
          border-radius: 4px;
          font-size: 1.2rem;
          padding-bottom: 0;
        }
      }

      .nav-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .nav-right-search-group {
          justify-content: space-between;
          width: 33.5rem;
          display: flex;
        }

        .form {
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 4px;
          position: relative;
          border: 1px solid #c2c8d1;
          transition: width 0.3s;
          height: 3rem;
          margin-top: 2px;
          width: 260px;
          position: relative;

          .search {
            position: absolute;
            background: #f2f3f5;
            position: relative;
            right: 2px;
            display: flex;
            width: 44px;
            height: 30px;
            border-radius: 2px;
            img {
              margin: auto;
            }
          }

          .input {
            border: none;
            width: calc(100% - 44px);
            padding: 0.6rem 0 0.6rem 1rem;
            box-shadow: none;
            outline: none;
            font-size: 1.1rem;
            color: #8a919f;
            background-color: transparent;
            transition: width 0.3s;
            color: #8a919f;
          }
        }

        .creater {
          width: 115px;
          height: 3rem;
          display: flex;
          transition: width 0.3s;

          .add-btn {
            border: none;
            padding: 0 1rem;
            font-size: 1.167rem;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            white-space: nowrap;
            height: 100%;
            color: #fff;
            background-color: var(--taojin-brand-1-normal);
            transition: background-color 0.1s linear 0.05s;
          }

          .add-btn:hover,
          .show-more:hover {
            background-color: var(--taojin-brand-2-hover);
          }

          .show-more {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.667rem;
            border-left: 1px solid hsla(0, 0%, 100%, 0.1);
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            color: #fff;
            background-color: var(--taojin-brand-1-normal);
          }
        }
        .header-partner {
          display: flex;
          align-items: center;
          justify-content: center;
          .partner-img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
          }
        }

        .btn-login {
          background: rgba(30, 128, 255, 0.05);
          border: 1px solid rgba(30, 128, 255, 0.3);
          border-radius: 4px;
          padding: 0.3rem 1.5rem;
          color: #007fff;
          line-height: 1.9rem;
          font-size: 14px;
          font-weight: 400;
          margin-right: 2rem;
          height: 3rem;
          transition: width 0.3s;
          white-space: nowrap;
          cursor: pointer;
        }
      }
    }
  }
}

.nav-item {
  height: 5rem;
  padding: 0 0.5rem;
  line-height: 5rem;
  color: var(--taojin-font-2);
  cursor: pointer;
  font-size: 1.167rem;
  display: flex;
  align-items: center;
  position: relative;
}

.buy-img {
  width: 120px;
  height: 40px;
  margin: 0 1rem;
  cursor: pointer;
}

.focus {
  border: 1px solid var(--taojin-brand-1-normal) !important;
}

.visable {
  transform: translate3d(0, -100%, 0);
}

.hidden {
  width: 0 !important;
  overflow: hidden !important;
}

.headerChecked {
  color: var(--taojin-brand-1-normal);
}

.hover::before {
  content: '';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #1e80ff;
}
</style>
